<!--
 * @Description:
 * @Date: 2021-12-30 17:26:15
 * @LastEditTime: 2021-12-30 23:57:06
  echartst图表
-->
<template>
  <div>
     <!-- body组件 start -->

    <div class="midd">
      <el-row :gutter="12">
        <el-col :span="7">
            <el-card shadow="always">
            <div class="echarts">热度top10</div>
            <div v-for="(item,index) in 10" :key="index" style="margin-top:0.0781rem">
                <span style="margin-right:0.1563rem;line-height:0.1042rem">{{index+1}}</span>
                <span>XXXXXXXXX</span>
            </div>
            </el-card>
        </el-col>
           <el-col :span="7">
            <el-card shadow="always">
            <div class="echarts">情报类别占比</div>
            <div id="main" style="height:2.0833rem;"></div>
            </el-card>
        </el-col>
           <el-col :span="10">
            <el-card shadow="always">
            <div class="echarts" >热门厂商</div>
            </el-card>
        </el-col>
        </el-row>
        <!-- 第四个图表 -->
        <el-row style="margin-top:0.1563rem">
            <el-col :span="24">
            <el-card shadow="always">
            <div class="echarts">情报数量趋势</div>
            </el-card>
            </el-col>
        </el-row>
  </div>

  <!--body组件 end  -->
  </div>
</template>

<script>

export default {
  data () {
    return {
      myChart: {} // 饼饼图
    }
  },
  methods: {
    // 纳丁格尔玫瑰图
    getShan () {
      this.myChart = this.$echarts.init(document.getElementById('main'))

      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4'
          ]
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [15, 105],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 33, name: 'rose 2' },
              { value: 28, name: 'rose 3' },
              { value: 22, name: 'rose 4' }
            ]
          }

        ]
      })
    }
  },
  created () {
    this.$nextTick(() => {
      this.getShan() // 玫瑰图
    })
  },
  mounted () {
    // 监听页面大小自适应
    const _this = this
    window.onresize = function () {
      _this.myChart.resize()
    }
  }
}
</script>

<style scoped>
/* 中间echarts图表的样式 */
.echarts{
    text-align: left;
    border-left:0.0208rem solid #4c7ae3;
    font-weight:700;font-size:0.0938rem;
    line-height: 0.0938rem;
    padding:0.016rem 0 0.016rem 0.0417rem
}
.midd{
    width: 8.3333rem;
    margin: 0 auto;
    margin-top: 0.1563rem;
}
</style>
